import React  from 'react';
import ReactDOM from 'react-dom';
// import App from './App.js'
import {createStore} from 'redux'

//用于通过动作创建新的state
const readucer = function(state={num:0},action ){
  console.log(action);

  switch(action.type){
    case "add":
      state.num++;
      break;
      case "decrement":
      state.num--;
      break;
      default:
        break
  }
  //最好进行解构放进来相当于对象的copy
  return {...state}


}
//创建仓库
const store = createStore(readucer)
console.log(store);

function add(){
  //通过仓库进行调用dispatch修改数据
  store.dispatch({type:'add',content:'hello'})
  console.log(store.getState());
}
function decrement(){
  //通过仓库进行调用dispatch修改数据
  store.dispatch({type:'decrement'})
  console.log(store.getState());
}


const Counter = function(props){
  let state = store.getState()

   return(
     <div>
       <h1>计算数量：{state.num}</h1>
       <button onClick={add} >+</button>
       <button onClick={decrement} >-</button>
     </div>
   )
}





ReactDOM.render(
  <Counter>
 
  </Counter>,
  document.querySelector('#root')
 
);
store.subscribe(()=>{
  ReactDOM.render(
    <Counter>
   
    </Counter>,
    document.querySelector('#root')
   
  );
})

